<script setup>
import {useRouter} from "vue-router";
import RequiredGoodsItem from "@/components/requiredGoodsItem.vue";
import {onMounted, ref} from "vue";
import {getGoodsService} from "@/api/goods.js";
import {getRequiredGoodsService} from "@/api/requiredGoods.js";
import Head from "@/components/Head.vue";

const route = useRouter();
const title = ref('')

onMounted(()=>{
  title.value = route.currentRoute.value.meta.title;
  document.title = title.value;
})

let currentPage = ref(1); //当前页数
const pageSize = ref(10); //每页显示条数
const total = ref(0); //总条数
const hasMore = ref(true); //是否还有更多数据

// 求购商品列表
const requiredGoodsList = ref([]);

const getRequiredGoods = async () => {
  let result = await getRequiredGoodsService(currentPage.value, pageSize.value)
  // 判断是否还有更多数据
  if (result.data.total <= currentPage.value * pageSize.value) {
    hasMore.value = false;
  }
  requiredGoodsList.value.push(...result.data.records);
  total.value = result.data.total
  currentPage.value += 1;
}

</script>

<template>
  <div class="container">
    <Head :title="title" :index="1"/>
    <el-main
        class="main"
        v-infinite-scroll="getRequiredGoods"
        :infinite-scroll-disabled="!hasMore"
        :infinite-scroll-distance="10"
        :infinite-scroll-immediate-check="false"
        @infinite-scroll-complete=""
        :infinite-scroll-delay="1000"
    >
      <el-container class="el-container">
        <RequiredGoodsItem
            v-for="(item,index) in requiredGoodsList"
            :key="index"
            :requiredGoods="item"
        />
        <div v-if="hasMore" v-loading="true" class="data-loading"></div>
        <p class="no-more" v-if="!hasMore">没有更多了...</p>
      </el-container>
    </el-main>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
}
.main {
  width: 100%;
  height: calc(100% - 60px);
  display: flex;
  justify-content: center;
  background-color: #eeeeee;

  .el-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.data-loading{
  margin-top: 10px;
  text-align: center;
}
.no-more{
  margin-top: -10px;
  text-align: center;
  color: #999;
  font-size: 20px;
  padding: 15px 0;
}
</style>